/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class='detail-container'>
    <div class='container'>
      <!-- 顶部导航 -->
      <div class='title-wrap' :style='{ marginTop: `${topAvoidArea}px` }'>
        <div v-show='isXsorSm' className='go-back' @click='goHome'>
          <img className='title-img' src='../../assets/images/left.png' />
        </div>
        <div class='icon-wrap'>
          <div class='title'>{{ activeItem.name }}</div>
        </div>
        <div class='icon-wrap'>
          <img src='../../assets/images/right.png' />
        </div>
      </div>

      <!-- 消息列表 -->
      <div class='content'>
        <div v-for='item in messageData' :key='item.id' class='message-item'>
          <div v-if="item.type === 'time'" class='time'>{{ item.content }}</div>

          <div v-else-if="item.type === 'left'" class='left-item'>
            <img class='avatar' src='../../assets/images/touxiang.svg' />
            <div v-if='item.isSpecial' class='left-item-content'>
              <img src='../../assets/images/naicha.png' />
              <div class='tip'>芬芬邀请你喝奶茶啦！</div>
              <img src='../../assets/images/naichaBJ.png' class='naicha-bg' />
              <div class='applet'>小程序</div>
            </div>
            <div v-else class='left-item-content normal'>
              {{ item.content }}
            </div>
          </div>

          <div v-else-if="item.type === 'right'" class='right-item'>
            <div class='right-item-content'>{{ item.content }}</div>
            <img class='avatar' src='../../assets/images/touxiang.svg' />
          </div>
        </div>
      </div>

      <!-- 底部输入框 -->
      <div class='bottom-wrap' ref='container' :style='{ marginBottom: `${bottomAvoidArea}px` }'>
        <div class='bottom-btn'>
          <img src='../../assets/images/smail.png' class='bottom-img' />
        </div>
        <input class='input' readonly />
        <div class='bottom-btn'>
          <img src='../../assets/images/lt_add.png' class='bottom-img' />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { AvoidArea, AvoidAreaInfo, AvoidAreaType } from '@/common/windowCommon';

export default {
  name: 'DetailContainer',
  data() {
    return {
      currentBp: 'xs',
      topAvoidArea: 0,
      bottomAvoidArea: 0,
      messageData: [
        {
          id: '1',
          type: 'left',
          content: '',
          isSpecial: true,
        },
        {
          id: '2',
          type: 'left',
          content: '请你喝奶茶，快点单吧！速度速度，就差你了',
        },
        {
          id: '3',
          type: 'time',
          content: '10:28',
        },
        {
          id: '4',
          type: 'right',
          content: '哈哈，今天有什么喜事',
        },
      ],
      activeItem: {
        id: '1',
        name: '张晓萌',
        message: '好的，我明天过来',
        time: '13:55',
        avatar: require('../../assets/images/touxiang.svg'),
        unread: null,
      },
    };
  },
  methods: {
    goHome() {
      this.$router.back();
    },
    handleAvoidAreaChange(event: any) {
      const data = event.detail as AvoidAreaInfo;
      const areaType = data.type;
      if (areaType === AvoidAreaType.TYPE_SYSTEM) {
        this.topAvoidArea = (window as any).webClass?.pxToVp(data.area.topRect.height);
      }
      if (areaType === AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        this.bottomAvoidArea = (window as any).webClass?.pxToVp(data.area.bottomRect.height);
      }
    }
  },
  watch: {
    '$store.state.activeItem'(newVal: any) {
      this.activeItem = newVal;
    },
    '$store.state.user.currentBp': {
      handler(newVal: string) {
        this.currentBp = newVal;
      },
      immediate: true, // 确保初始化时执行
    },
  },
  computed: {
    isXsorSm() {
      return (
        this.$store.state.currentBp === 'xs' ||
        this.$store.state.currentBp === 'sm'
      );
    },
  },
  mounted() {
    this.activeItem = this.$store.state.activeItem;
    if ((window as any).webClass) {
      const webClass = (window as any).webClass;
      const topArea = webClass.getAvoidArea(AvoidAreaType.TYPE_SYSTEM) as AvoidArea;
      const bottomArea = webClass.getAvoidArea(AvoidAreaType.TYPE_NAVIGATION_INDICATOR) as AvoidArea;
      this.topAvoidArea = webClass.pxToVp(topArea.topRect.height);
      this.bottomAvoidArea = webClass.pxToVp(bottomArea.bottomRect.height);
    }
    window.addEventListener('avoidAreaChange', this.handleAvoidAreaChange);
  },
  beforeDestroy() {
    window.removeEventListener('avoidAreaChange', this.handleAvoidAreaChange);
  }
};
</script>

<style lang='less' scoped>
@import './DetailContainer.less';
</style>
